import { Image, View } from '@tarojs/components';
import { navigateTo } from '@tarojs/taro';
import settingImg from '@/static/images/icon/setting.png';
import repairRecordImg from '@/static/images/icon/repair-report.png';
import myCollectImg from '@/static/images/icon/collect.png';
import rentalHistoryImg from '@/static/images/icon/rental-history.png';
import Navbar from '@/components/Navbar';
import './index.less';
import { useMemo } from 'react';
import authStore from '@/stores/AuthStore';
import useIdentity from '@/hooks/useIdentity';
import userStore from '@/stores/UserStore';
import { observer } from 'mobx-react-lite';
import systemStore from '@/stores/SystemStore';
import ImageComp from '@/components/Image';
import SwitchIdentityImg from '@/static/images/icon/switch-identity.png';
import ComplaintImg from '@/static/images/icon/complaint.png';
import Logout from '@/components/Logout';
import Domain from '@/components/Domain';

const TenantUserComp = () => {
  const { user } = userStore;
  const { isLogin } = authStore;
  const { switchIdentity } = useIdentity();

  // 功能区列表
  const domainList = useMemo(
    () => [
      {
        icon: <Image src={settingImg} className='icon' />,
        text: '个人设置',
        name: 'personalSettings',
        to: '/pages/selfInfo/index',
        notice: 0,
      },
      {
        icon: <Image src={repairRecordImg} className='icon' />,
        text: '报修记录',
        name: 'repairRecord',
        to: '/pages/tenantReport/index',
        notice: 0,
      },
      {
        icon: <Image src={myCollectImg} className='icon' />,
        text: '我的收藏',
        name: 'myCollect',
        to: '/pages/tenantCollect/index',
        notice: 0,
      },
      {
        icon: <Image src={rentalHistoryImg} className='icon' />,
        text: '租房历史',
        name: 'rentalHistory',
        to: '/pages/tenantRefundHistory/index',
        notice: 0,
      },
      {
        icon: <Image src={ComplaintImg} className='icon' />,
        text: '投诉建议',
        name: 'complaint',
        to: '/pages/complaintList/index',
        notice: 0,
      },
    ],
    []
  );

  return (
    <Navbar
      className='tenant-user-container'
      style={{ height: systemStore.notNavbarHaveTabbarHeight }}
    >
      <View className='bg-header'>
        <Image
          src={SwitchIdentityImg}
          className='switch-identity-icon'
          style={{ top: systemStore.navbarHeight - 36 + 'px' }}
          onClick={switchIdentity}
        />
      </View>
      <View className='user-main'>
        <View
          onClick={() =>
            navigateTo({
              url: isLogin ? '/pages/selfInfo/index' : '/pages/login/index',
            })
          }
          className='user-info'
        >
          <View className='img-wrap'>
            <ImageComp src={user?.headImg} />
          </View>
          <View className='user-name font-bold'>
            {isLogin ? user?.name : '请登录'}
          </View>
        </View>
        <Domain domainList={domainList} isLogin={isLogin} />
      </View>
      <Logout isLogin={isLogin} />
    </Navbar>
  );
};

export default observer(TenantUserComp);
